import React from 'react';
import Element from './components/element';
import css from './index.less';
import { inject, observer } from 'mobx-react';
/**
 * 动效编辑器内容渲染
 */
@inject('store')
@observer
class Right extends React.Component {

  constructor() {
    super();
  }

  save() {
    const { project } = this.props.store;
    const { temporaryMotions } = project.currentPages.current;
    project.update('motionVisible', false);
    temporaryMotions.saveMotions();

  }

  onClickElement(element) {
    const { temporaryMotions } = this.props.store.project.currentPages.current;
    const { current } = temporaryMotions.current;
    current.update('current', element);
  }

  render() {

    // 帧
    const { temporaryMotions } = this.props.store.project.currentPages.current;
    const { current } = temporaryMotions.current;

    return (
      <div className={css.layout}>
        <div>
          <button onClick={this.save.bind(this)}>保存</button>
        </div>
        <div className={css.title}>
          <h3>元素</h3>
        </div>
        <div>
          {
            current.list.map(item => {
              const props = {
                key: item.id,
                className: item === current.current ? css.selected : '',
                element: item,
                onClickElement: this.onClickElement.bind(this)
              };
              return <Element {...props}/>;
            })
          }
        </div>
      </div>
    );
  }
}
export default Right;
